require(['./config'], () => {
    require(['template', 'jquery', 'footer'], (template) => {
        class ShopCar {
            constructor() {
                this.load()
                this.getRecommendList()
                this.arr = []
                this.allCount = 0
                this.allPrice = 0
                this.getListBody()
            }
            load() {
                //头部导航商品导航条-logo的效果
                $('.bar_logo').mouseenter(function () {
                    $('.mi_home').animate({
                        left: 0
                    }, 100)
                    $('.mi_logo').animate({
                        left: 55
                    }, 50)
                })
                $('.bar_logo').mouseleave(function () {
                    $('.mi_home').animate({
                        left: -55
                    }, 100)
                    $('.mi_logo').animate({
                        left: 0
                    }, 50)
                })
                $('.recommend-list').on('mouseenter', '.recommend-item', function () {
                    $(this).find('.recommend-action').css({
                        opacity: '1',
                        bottom: '84px'
                    })
                })
                $('.recommend-list').on('mouseleave', '.recommend-item', function () {
                    $(this).find('.recommend-action').css({
                        opacity: '0',
                        bottom: '16px'
                    })
                })
            }
            //推荐
            getRecommendList() {
                $.get('/api/xiaomi-shop', res => {
                    const { data4: { list } } = res
                    if (res.code === 200) {
                        $('#shopRecommend').html(template('shopCarRecommend', { list: list }))
                    }
                })
            }
            //购物车商品渲染
            getListBody() {
                //先去取localStorage里面的数据
                this.arr = JSON.parse(localStorage.getItem('list'))
                const { arr } = this.arr
                //判断有没有数据，如果没有提醒去加购
                if (this.arr) {
                    $('#list-Body').html(template('listBody', { arr: this.arr }))
                } else {
                    alert('购物车暂无商品，请先去商品页面浏览')
                    location.href = '/'
                }
                this.CountQuantityAndPrice()
            }
            //统计数量和总价
            CountQuantityAndPrice() {

                this.arr.forEach(item => {
                    this.allCount += item.quantity
                    this.allPrice += item.quantity * item.price
                })
                $('.allCount').html(`${this.allCount}`)
                console.log($('.total-price em'))
                $('.total-price em').html(`${this.allPrice}`)
            }

        }
        return new ShopCar()
    })
})